<template>
  <div class="son">
    <div>子组件</div>
    <div v-if="!inputShow" class="value-content">
      父组件的值：{{ parentValue }}
    </div>
    <div v-else-if="inputShow" class="input-box">
      <el-input clearable v-model="sonValue"></el-input>
      <el-button v-if="btnShow" @click="transmitInfo">向父组件传值</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, defineEmits } from "vue";

const props = defineProps({
  parentValue: String,
  inputShow: Boolean,
  btnShow: Boolean,
});

const sonValue = ref("子组件input的值");
const emit = defineEmits(["changeSonInfo"]);
const transmitInfo = () => {
  emit("changeSonInfo", sonValue.value);
};
const sonFunByRef = () => {
  return sonValue.value+"_ByRef";
};
const sonFunByChild = () => {
  return sonValue.value+"_ByChild";
};
defineExpose({
  sonFunByRef,
});
</script>
<style scoped lang="scss">
.son {
  background-color: burlywood;
  padding: 8px;
  .input-box {
    display: flex;
    margin: 8px 0;
    .el-input {
      width: 200px;
      margin-right: 12px;
    }
  }
}
.value-content {
  margin: 8px 0;
}
</style>
